import { Form, Input, Button, Checkbox } from 'antd'

import './index.css'

import logo from '../../assets/images/logo.png'

const Login = () => {
  const onFinish = values => {
    console.log('Received values of form: ', values)
  }

  return (
    <div className="login">
      <div className="login-wrapper">
        <div>
          <img className="logo" src={logo} alt="" />
        </div>

        <Form className="login-form" initialValues={{ remember: true }} onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit" className="login-form-button">
              登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
